<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>人人点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">

  <link href="./css/blog-detail.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/vant.css" rel="stylesheet">


  <style type="text/css">
    .header {
      position: relative;
    }

    .foot-view span {
      font-size: 12px;
    }

    .liked {}

    .footInput {
      width: 100%;
      height: 8%;
      display: flex;
      /* justify-content: center;
      align-items: center; */
      box-shadow: 0 -1px 2px 1px rgba(0, 0, 0, 0.1);
      position: absolute;
      bottom: 0;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="header">
      <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
      <div class="header-title"></div>
      <div class="header-share">...</div>
    </div>
    <div style="height: 85%; overflow-y: scroll; overflow-x: hidden">
      <div class="blog-info-box" ref="swiper" @touchstart="moveStart" @touchmove="moving" @touchend="moveEnd">
        <div class="swiper-item" v-for="(img, i) in blog.images" :key="i">
          <img :src="img" alt="" style="width: 100%" height="100%">
        </div>
      </div>
      <div class="basic">
        <div class="basic-icon" @click="toOtherInfo(blog.userId)">
          <img :src="blog.icon || '/imgs/icons/default-icon.png'" alt="">
        </div>
        <div class="basic-info">
          <div class="name">{{blog.name}}</div>
          <span class="time">{{formatTime(new Date(blog.createTime))}}</span>
        </div>
        <div style="width: 20%">
          <div class="logout-btn" @click="follow" v-show="!user || user.id !== blog.userId ">
            {{followed ? '取消关注' : '关注'}}
          </div>
        </div>

      </div>
      <div class="blog-text" v-html="blog.content">
      </div>
      <div class="shop-basic">
        <div class="shop-icon">
          <img :src="shop.image" alt="">
        </div>
        <div style="width: 80%">
          <div class="name">{{shop.name}}</div>
          <div>
            <el-rate v-model="shop.score/10">
            </el-rate>
          </div>
          <div class="shop-avg">￥{{shop.avgPrice}}/人</div>
        </div>
      </div>
      <div class="zan-box">
        <div>
          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2187" width="20" height="20">
            <path
              d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
              p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
          </svg>
        </div>
        <div class="zan-list">
          <div class="user-icon-mini" v-for="u in likes" :key="u.id">
            <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="">
          </div>
          <div style="margin-left:10px;text-align: center;line-height: 24px;">{{blog.liked}}人点赞</div>
        </div>
      </div>
      <div class="blog-divider"></div>
      <div class="blog-comments">
        <div class="comments-head">
          <div>网友评价 <span>({{commentsTotal}})</span></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
        <!-- <div class="comment-list">
          <div class="comment-box" v-for="i in 3" :key="i">
            <div class="comment-icon">
              <img
                src="https://p0.meituan.net/userheadpicbackend/57e44d6eba01aad0d8d711788f30a126549507.jpg%4048w_48h_1e_1c_1l%7Cwatermark%3D0"
                alt="">
            </div>
            <div class="comment-info">
              <div class="comment-user">叶小乙 <span>Lv5</span></div>
              <div style="display: flex;">
                打分
                <el-rate disabled v-model="4.5"></el-rate>
              </div>
              <div style="padding: 5px 0; font-size: 14px">
                某平台上买的券，价格可以当工作餐吃，虽然价格便宜，但是这家店一点都没有...
              </div>
              <div class="comment-images">
                <img
                  src="https://qcloud.dpfile.com/pc/6T7MfXzx7USPIkSy7jzm40qZSmlHUF2jd-FZUL6WpjE9byagjLlrseWxnl1LcbuSGybIjx5eX6WNgCPvcASYAw.jpg"
                  alt="">
                <img
                  src="https://qcloud.dpfile.com/pc/sZ5q-zgglv4VXEWU71xCFjnLM_jUHq-ylq0GKivtrz3JksWQ1f7oBWZsxm1DWgcaGybIjx5eX6WNgCPvcASYAw.jpg"
                  alt="">
                <img
                  src="https://qcloud.dpfile.com/pc/xZy6W4NwuRFchlOi43DVLPFsx7KWWvPqifE1JTe_jreqdsBYA9CFkeSm2ZlF0OVmGybIjx5eX6WNgCPvcASYAw.jpg"
                  alt="">
                <img
                  src="https://qcloud.dpfile.com/pc/xZy6W4NwuRFchlOi43DVLPFsx7KWWvPqifE1JTe_jreqdsBYA9CFkeSm2ZlF0OVmGybIjx5eX6WNgCPvcASYAw.jpg"
                  alt="">
              </div>
              <div>
                浏览641 &nbsp;&nbsp;&nbsp;&nbsp;评论5
              </div>
            </div>
          </div>
          <div
            style="display: flex; justify-content: space-between;padding: 15px 0; border-top: 1px solid #f1f1f1; margin-top: 10px;">
            <div>查看全部119条评价</div>
            <div><i class="el-icon-arrow-right"></i></div>
          </div>
        </div> -->

        <div class="comment-list">
          <div class="comment-box" style="display: block" v-for="comment in commnetList" :key="comment.id">
            <div style="display:flex">
              <!-- 评论者头像 -->
              <div class="comment-icon" @click="toOtherInfo(comment.userId)">
                <img :src="comment.icon ? comment.icon : '/imgs/icons/default-icon.png'" alt="">
              </div>
              <!-- 评论div -->
              <div class="comment-info">
                <!-- 评论者昵称 -->
                <div class="comment-user">
                  {{comment.nickName}}
                </div>
                <!-- 评论时间 -->
                <div style="display: flex">
                  {{comment.createTime}}
                  <!-- 评论点赞，回复按钮 -->
                  <div style="margin-left: 42%;display: flex;">
                    <div @click="addCommnetLike(comment)" style="display: flex">
                      <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                        <path
                          d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                          p-id="2188" :fill="comment.isLike ? '#ff6633' : '#82848a'"></path>
                      </svg>
                      &nbsp;{{comment.liked}}
                    </div>
                    <!--  评论回复 -->
                    <div style=" display:flex">
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <el-dropdown trigger="click" size="mini" placement="top" type="mini">
                        <i class="el-icon-more"></i>
                        <el-dropdown-menu>
                          <el-dropdown-item>
                            <div @click="replyCommentForm(comment)">
                              回复
                            </div>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <div v-if="comment.userId == user.id" @click="deleteComment(comment.id)">
                              删除
                            </div>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      &nbsp;
                    </div>
                  </div>
                </div>
                <!-- 评论主题 ： 评论内容，点赞，回复 -->
                <div style="padding: 5px 0; font-size: 14px;display: flex;">
                  <!-- 评论内容 -->
                  <div>
                    {{comment.content}}
                  </div>
                </div>
              </div>
            </div>

            <!-- 回复的内容 -->
            <div v-if="comment.children.length" style="padding-left: 5px;">
              <div v-for="reply in comment.children" :key="reply.id" style="padding: 5px 10px">
                <div style="display: flex">
                  <!-- 评论者头像 -->
                  <div class="comment-icon" @click="toOtherInfo(reply.userId)">
                    <img :src="reply.icon ? reply.icon : '/imgs/icons/default-icon.png'"  alt="">
                  </div>
                  <!-- 评论div -->
                  <div class="comment-info">
                    <!-- 评论者昵称 -->
                    <div class="comment-user">
                      {{reply.nickName}} &nbsp;回复： {{reply.pnickName}}
                    </div>
                    <!-- 评论时间 -->
                    <div style="display: flex">
                      {{reply.createTime}}
                      <!-- 评论点赞，回复按钮 -->
                      <div style="margin-left: 40%;display: flex;">
                        <div style="display: flex" @click="addCommnetLike(reply)">
                          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                            <path
                              d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                              p-id="2188" :fill="reply.isLike ? '#ff6633' : '#82848a'"></path>
                          </svg>
                          &nbsp;{{reply.liked}}
                        </div>
                        <div style="display:flex">
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <el-dropdown trigger="click" size="mini" placement="top" type="mini">
                            <i class="el-icon-more"></i>
                            <el-dropdown-menu>
                              <el-dropdown-item>
                                <div @click="replyCommentForm(reply)">
                                  回复
                                </div>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <div v-if="reply.userId == user.id" @click="deleteComment(reply.id)">
                                  删除
                                </div>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          &nbsp;
                        </div>
                      </div>
                    </div>
                    <!-- 评论内容 -->
                    <div style="padding: 5px 0; font-size: 14px;display: flex;">
                      <!-- 评论内容 -->
                      <div>
                        {{reply.content}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>

    <div class="blog-divider"></div>

    <!-- 底部点赞和评论 -->
    <div class="foot" v-if="!checkCommentInputVisible">
      <div class="foot-box">
        <div class="foot-view" @click="addLike()">
          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2187" width="26" height="26">
            <path
              d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
              p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
          </svg>
          <span :class="{liked: blog.isLike}"> {{blog.liked}}</span>
        </div>
      </div>
      <div style="width: 40%">
      </div>
      <div class="foot-box">
        <div class="foot-view" @click="checkCommentInputVisible=true"><i class="el-icon-chat-square"></i>
          <span :class="{liked: blog.isLike}"> {{blog.comments}}</span>
        </div>
      </div>
    </div>

    <!-- 评论按钮点击触发 -->
    <div class="footInput" v-if="checkCommentInputVisible">
      <div style="width:80%;height:100%;display: flex;">
        <input type="text" style="width:100%;border: none;outline:none;
          background-color: rgb(235, 227, 227); margin: 12px 10px; font-size: 14px;
        border-radius: 18px;" :placeholder="placeholderText" v-model="commentForm.content" />
      </div>
      <div style="width:20%;height:30px;display: flex;line-height: 20px;justify-content: center;
      align-items: center; margin: 12px 10px;">
        <el-button size="mini" @click="submitCommentForm" :disabled="commentForm.content==''">发送</el-button>
      </div>
    </div>

  </div>

  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <!-- 引入组件库 -->
  <script src="./js/element.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/vant.min.js"></script>

  <script>
    let each = function (ary, callback) {
      for (let i = 0, l = ary.length; i < l; i++) {
        if (callback(ary[i], i) === false) break
      }
    }
    const app = new Vue({
      el: "#app",
      data: {
        util,
        showPopover: false,
        actions: [{ text: '回复', icon: '' }, { text: '删除', icon: '' }],
        commentsTotal: '',  // 评论总数
        checkCommentInputVisible: false,  // 判断是否点击回复
        commnetList: {},  // 评论回复列表
        placeholderText: '发条友善评论吧~~',
        commentForm: {
          content: '',
          userId: '',
          blogId: '',
          parentId: 0,
          answerId: 0,
        },   // 评论表单
        blog: {},
        shop: {},
        likes: [],
        user: {}, // 登录用户
        followed: false, // 是否关注了
        _width: 0,
        duration: 300,
        container: null,
        items: [],
        active: 0,
        start: {
          x: 0,
          y: 0
        },
        move: {
          x: 0,
          y: 0
        },
        sensitivity: 60,
        resistance: 0.3
      },
      created() {
        let id = util.getUrlParam("id");
        this.queryBlogById(id);
        this.loadComments(id);
        this.loadCommentsTotal(id);
      },
      methods: {
        init() {
          // 获得父容器节点
          this.container = this.$refs.swiper
          // 获得所有的子节点
          this.items = this.container.querySelectorAll('.swiper-item')
          this.updateItemWidth()
          this.setTransform()
          this.setTransition('none')
        },
        goBack() {
          history.back();
        },
        toOtherInfo(userId) {
          // if (this.blog.userId === this.user.id) {
          if (this.blog.userId === userId) {
            location.href = "/info.html"
          } else {
            // location.href = "/other-info.html?id=" + this.blog.userId
            location.href = "/other-info.html?id=" + userId
          }
        },
        queryBlogById(id) {
          axios.get("/blog/" + id)
            .then(({ data }) => {
              data.images = data.images.split(",")
              this.blog = data;
              this.$nextTick(this.init);
              this.queryShopById(data.shopId)
              this.queryLikeList(id);
              this.queryLoginUser();
            })
            .catch(this.$message.error)
        },
        queryShopById(shopId) {
          axios.get("/shop/" + shopId)
            .then(({ data }) => {
              data.image = data.images.split(",")[0]
              this.shop = data
            })
            .catch(this.$message.error)
        },
        queryLikeList(id) {
          axios.get("/blog/likes/" + id)
            .then(({ data }) => this.likes = data)
            .catch(this.$message.error)
        },
        addLike() {
          axios.put("/blog/like/" + this.blog.id)
            .then(({ data }) => {
              axios.get("/blog/" + this.blog.id)
                .then(({ data }) => {
                  data.images = data.images.split(",")
                  this.blog = data;
                  this.queryLikeList(this.blog.id);
                })
                .catch(this.$message.error)
            })
            .catch(err => {
              this.$message.error(err)
            })
        },
        // 添加点赞数
        addCommnetLike(comment) {
          axios.put("/blog-comments/like/" + comment.id)
            .then(res => {
              this.loadComments(this.blog.id);
            })
            .catch(this.$message.error)
        },
        isFollowed() {
          axios.get("/follow/or/not/" + this.blog.userId)
            .then(({ data }) => this.followed = data)
            .catch(this.$message.error)
        },
        follow() {
          axios.put("/follow/" + this.blog.userId + "/" + !this.followed)
            .then(() => {
              this.$message.success(this.followed ? "已取消关注" : "已关注")
              this.followed = !this.followed
            })
            .catch(this.$message.error)
        },
        formatTime(b) {
          return b.getFullYear() + "年" + (b.getMonth() + 1) + "月" + b.getDate() + "日 ";
        },
        formatMinutes(m) {
          if (m < 10) m = "0" + m
          return m;
        },
        deleteComment(id) {
          axios.delete("/blog-comments/deleteComment/" + id)
            .then(res => {
              if (res.data) {
                this.$message.error('删除失败,该评论下面有子评论！')
              } else {
                this.$message.success('删除成功！')
              }
              this.loadComments(this.blog.id);
            })
        },
        replyCommentForm(comment) {
          this.placeholderText = "回复 " + comment.nickName
          this.checkCommentInputVisible = true;
          if (comment.parentId == 0) {
            this.commentForm.parentId = comment.id;
          } else {
            this.commentForm.parentId = comment.parentId;
          }
          this.commentForm.answerId = comment.userId;
        },
        submitCommentForm() {
          this.commentForm.userId = this.user.id;
          this.commentForm.blogId = this.blog.id;
          axios.post("/blog-comments/saveBlogComment", this.commentForm)
            .then(res => {
              this.loadComments(this.blog.id);
              this.checkCommentInputVisible = false;
            })
            .catch(err => this.$message.error(err))
        },
        loadComments(id) {
          axios.get("/blog-comments/showBlogComments/" + id)
            .then(res => {
              this.commnetList = res.data
            })
            .catch(err => this.$message.err(error))
        },
        loadCommentsTotal(id) {
          axios.get("/blog-comments/getBlogCommentsTotal/" + id)
            .then(res => {
              this.commentsTotal = res.data
            })
            .catch(err => this.$message.error(err))
        },
        queryLoginUser() {
          // 查询用户信息
          axios.get("/user/me")
            .then(({ data }) => {
              // 保存用户
              this.user = data;
              if (this.user.id !== this.blog.userId) {
                this.isFollowed();
              }
            })
            .catch(console.log)
        },
        // 获取父容器宽度，并且更新所有的子节点宽度，因为我们默认所有子节点的宽高等于父节点的宽高
        updateItemWidth() {
          this._width = this.container.offsetWidth || document.documentElement.offsetWidth
        },
        // 根据当前活动子项的下标计算各个子项的X轴位置
        // 计算公式(子项的下标 - 当前活动下标) * 子项宽度 + 偏移(手指移动距离)；
        setTransform(offset) {
          offset = offset || 0
          each(this.items, (item, i) => {
            let distance = (i - this.active) * this._width + offset
            let transform = `translate3d(${distance}px, 0, 0)`
            item.style.webkitTransform = transform
            item.style.transform = transform
          })
        },
        // 给每一个子项添加transition过度动画
        setTransition(duration) {
          duration = duration || this.duration
          duration = typeof duration === 'number' ? (duration + 'ms') : duration
          each(this.items, (item) => {
            item.style.webkitTransition = duration
            item.style.transition = duration
          })
        },
        moveStart(e) {
          console.log('moveStart')
          this.start.x = e.changedTouches[0].pageX
          this.start.y = e.changedTouches[0].pageY
          this.setTransition('none')
        },
        moving(e) {
          console.log('moving')
          e.preventDefault()
          e.stopPropagation()
          let distanceX = e.changedTouches[0].pageX - this.start.x
          let distanceY = e.changedTouches[0].pageY - this.start.y
          if (Math.abs(distanceX) > Math.abs(distanceY)) {
            this.isMoving = true
            this.move.x = this.start.x + distanceX
            this.move.y = this.start.y + distanceY
            // 当活动子项为第一项且手指向右滑动或者活动项为最后一项切向左滑动的时候，添加阻力，形成一个拉弹簧的效果
            if ((this.active === 0 && distanceX > 0) || (this.active === (this.items.length - 1) && distanceX < 0)) {
              distanceX = distanceX * this.resistance
            }
            this.setTransform(distanceX)
          }
        },
        moveEnd(e) {
          console.log('moveEnd')
          if (this.isMoving) {
            e.preventDefault()
            e.stopPropagation()
            let distance = this.move.x - this.start.x
            if (Math.abs(distance) > this.sensitivity) {
              if (distance < 0) {
                this.next()
              } else {
                this.prev()
              }
            } else {
              this.back()
            }
            this.reset()
            this.isMoving = false
          }
        },
        next() {
          let index = this.active + 1
          // 运用动画切换到指定下标的子项
          this.go(index)
        },
        prev() {
          let index = this.active - 1
          // 运用动画切换到指定下标的子项
          this.go(index)
        },
        reset() {
          this.start.x = 0
          this.start.y = 0
          this.move.x = 0
          this.move.y = 0
        },
        back() {
          this.setTransition()
          this.setTransform()
        },
        destroy() {
          this.setTransition('none')
        },
        // 运用动画切换到指定下标的子项
        go(index) {
          this.active = index
          if (this.active < 0) {
            this.active = 0
          } else if (this.active > this.items.length - 1) {
            this.active = this.items.length - 1
          }
          this.$emit('change', this.active)
          this.setTransition()
          this.setTransform()
        }
      }
    })
  </script>
</body>

</html>